<template>
	<div class="register" :style="{ backgroundImage: `url(https://ts1.cn.mm.bing.net/th/id/R-C.04048645ba9491fef9cfe980d8b6b1bf?rik=8vteWtJIMnsJlw&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2014%2f0728%2f0708zsucaijtdcb00654.jpg&ehk=ajOzQrxLN8El8FUHhKKNJ%2bRH%2bmXLjzck6nMfdtpryS0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1)`}">
		<el-form class="login-form" :model="form" :rules="rules" ref="formRef">
			<h2>注册</h2>
			<el-form-item label="用户名" prop="userName">
				<el-input v-model="form.userName" />
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="form.password" />
			</el-form-item>

			<el-form-item label="角色" prop="role">
				<el-radio v-model="form.role"  label="ADMIN"   >管理员</el-radio>
				<el-radio  v-model="form.role"	label="INFORMATION_CLERK" >资料员</el-radio>
			</el-form-item>
<!--			<el-form-item label="真名" prop="name">-->
<!--				<el-input v-model="form.name" />-->
<!--			</el-form-item>-->
		 
			<el-form-item label="电话" prop="phone">
				<el-input v-model="form.phone" />
			</el-form-item>

		 
			<el-form-item>
				<el-button type="primary" @click="toRegister(formRef)">注册</el-button>
				<el-button @click="toLogin">返回登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Plus } from "@element-plus/icons-vue";
import {useUserStore} from "@/stores/userStores";
import {register} from "@/api/login";
const userStore = useUserStore();

const router = useRouter();
const form = reactive({
	username: "",
	password: "",
	role: "",
});
const uploadList = ref([]);
const uploadUrl = userStore.getBackUrl() + "/system/file/local/easyUpload";
const formRef = ref();
const token = userStore.token;
const rules = {
	userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }],
	
	role: [{ required: true, message: "请选择角色", trigger: "blur" }],
	phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
 
};

 



const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.success) {
		form.avatar = response.data;
	}
};

function toRegister(formEl) {
	formEl.validate(async (valid) => {
		if (valid) {
			const res = await register(form);
			if (!res.success) {
				ElMessage.error(res.msg);
				return;
			}
			await router.push("/login");
		} else {
			return false;
		}
	});
}

function toLogin() {
	router.push("/login");
}
</script>

<style>
.register {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;

	background-size: cover;
	background-position: center;
}

.login-form {
	width: 400px;
	padding: 40px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 10px #ccc;
	opacity: 0.9;
}

.login-form h2 {
	margin-bottom: 20px;
}

.captcha img {
	width: 150px;
	height: 50px;
	margin-right: 10px;
}

.captcha a {
	font-size: 14px;
	color: #333;
}
</style>
